<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul id="father">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
        var father = document.getElementById("father");
        var lis = father.children;
        // 利用事件冒泡，将子级的事件委托给父级加载,事件函数需要一个 e 参数，存储事件对象，可以获取触发事件的元素
        // ul 中 不论哪个 li 子元素点击，通过事件冒泡，都会触发 ul 点击事件，事件函数中再获取实际事件源并设置背景色，则每个列表项点击都能改变背景
        father.onclick = function (e) {
            for (var i = 0; i < lis.length; i++) {
                lis[i].style.backgroundColor = "";
            }
            e = e || window.e;
            e.target.style.backgroundColor = "yellow"; //实际触发点击事件的列表项
            this.style.backgroundColor = ""; //防止点击ul时改变整体背景色
        };
    </script>
</body>

</html>